<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>template.js demo</title>
  </head>
  <body>
    <!-- 对象 -->
    <div id="show1"></div>
    <script type="template" id="temp1">
      {{ if user }}
        <h3>user name {{user.name}}</h3>
      {{ /if }}
    </script>
    <!-- 数组 -->
    <div id="show2"></div>
    <script type="template" id="temp2">
      <ul>
        {{ each list }}
          <!-- 使用 $data 可直接读取 list -->
          {{if $value.id > 0}}
            <li>
              <p>index:{{$index}} id:{{$value.id}} name:{{$value.name}}</p>
            </li>
          {{else if $value.id === 1}}
            <p>{{$value.name}}</p>
          {{/if}}
        {{ /each }}
      </ul>
    </script>
  </body>
</html>
<script src="./template-web.min.js"></script>
<script>
  // 对象
  var user = {
    name: 'Bell'
  }
  var html1 = template('temp1', { user: user })
  document.getElementById('show1').innerHTML = html1;
  
  // 列表
  var html2 = template('temp2', {
    list: [
      {id: 1, name: 'bell1'},
      {id: 2, name: 'bell2'},
      {id: 3, name: 'bell3'},
    ]
  })
  document.getElementById('show2').innerHTML = html2;
</script>
